<!--  -->
<template>
  <div>
    <van-checkbox-group v-model="result">
      <van-checkbox 
        v-for="item in goods" :key="item.id"
        :name="item.id" 
      >
        <van-card
          :num="item.num"
          :price="formatMoney(item.price)"
          :desc="item.desc"
          :title="item.title"
          :thumb="item.thumb"
        />
      </van-checkbox>
    </van-checkbox-group>

    <van-submit-bar 
    :disabled="!result.length"
    :price="totalPrice" 
    button-text="提交订单"
     @submit="onSubmit" />
  </div>
</template>

<script>
import { SubmitBar } from 'vant';
export default {
  data() {
    return {
      result: ["1","2","3"],
       goods: [
        {
          id: "1",
          title: "进口香蕉",
          desc: "约250g，2根",
          price: 200,
          num: 2,
          thumb:
            "https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg",
        },
        {
          id: "2",
          title: "陕西蜜梨",
          desc: "约600g",
          price: 690,
          num: 3,
          thumb:
            "https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg",
        },
        {
          id: "3",
          title: "美国伽力果",
          desc: "约680g/3个",
          price: 2680,
          num: 4,
          thumb:
            "https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg",
        },
      ],
    };
  },
  methods: {
    formatMoney(price){
      return (price/100).toFixed(2)
    },
    onSubmit(){
      this.$toast('点击提交按钮'+this.totalPrice)
    }
  },
  components:{
    [SubmitBar.name]:SubmitBar
  },
  computed:{
    totalPrice(){
      let tp=0;
      this.goods.forEach(item=>{
        if(this.result.indexOf(item.id)!=-1){
          tp+=item.price*item.num
        }
      })
      // console.log(this.result);
      return tp;
    }
  }
};
</script>
<style lang='scss' >
// /deep/ .van-checkbox__label{
//   width: 100%;
// }
.van-card__price{
  color: red;
}
.van-checkbox__label{
  width: 100%;
}
</style>